<template>
	<view class="container">
		<view class="contentBgClass">
			<view class="topBgColorClass" :style="{backgroundImage:'url('+currentBg+')'}">
				<view class="head-wrapper">
					<image :src="headUrl" class="headImgClass" mode="aspectFill" @click="toEditUserInfo()"></image>
					<image v-if="isVip" :src="staticImgs.vip" class="vip-icon"></image>
				</view>

				<template v-if="isLogin">
					<view class="nickNameTitleClass flex-vc" @click="toEditUserInfo()">{{nickName}}
						<image src="../../static/images/mine/edit-square.png" class="edit-userinfo-icon-img"
							mode="aspectFill"></image>
					</view>
					<!-- <view v-if="uniPlatform != 'mp-toutiao'">
						<view v-if="hasPhone" class="phoneNumberClass" @click="toLogin()">{{phoneNumber}}</view>
						<view v-else class="bind-phone-btn" @click="toLogin()">绑定手机号</view>
					</view> -->
				</template>

				<template v-else>
					<view class="login-btn" @click="toLogin()">立即登录</view>
				</template>


			</view>

			<view class="contentClass">
				<view class="optionListClass">
					<view class="optionItemClass" @click="showDailyAffirmationModal">
						<view class="optionContentClass">
							<image :src="meItem.me_daily" class="seeDoctorImgRecordClass"></image>
							<view class="seeDoctorRecordNameClass">心理日签</view>
						</view>
						<view class="item-right-wrapper">
							<image src="../../static/images/img_me_right_jian_tou.png" class="rightIconClass">
							</image>
						</view>
					</view>
					<view class="lineClass"></view>
					<view class="optionItemClass" @click="toExchangeGoods">
						<view class="optionContentClass">
							<image :src="meItem.exchange_goods" class="seeDoctorImgRecordClass"></image>
							<view class="seeDoctorRecordNameClass">商品兑换码</view>
						</view>
						<view class="item-right-wrapper">
							<image src="../../static/images/img_me_right_jian_tou.png" class="rightIconClass">
							</image>
						</view>
					</view>
					<view class="lineClass"></view>
					<view class="optionItemClass" @click="toCouponPage">
						<view class="optionContentClass">
							<image src="../../static/images/me_menu_icon_3.png" class="seeDoctorImgRecordClass"></image>
							<view class="seeDoctorRecordNameClass">我的卡券</view>
						</view>
						<view class="item-right-wrapper">
							<view class="extra-info" v-if="couponCount">{{couponCount}}张</view>
							<image src="../../static/images/img_me_right_jian_tou.png" class="rightIconClass">
							</image>
						</view>
					</view>
					<view class="lineClass"></view>
					<view class="optionItemClass" @click="toEquityPage">
						<view class="optionContentClass">
							<image src="../../static/images/me_menu_icon_1.png" class="seeDoctorImgRecordClass"></image>
							<view class="seeDoctorRecordNameClass">我的权益</view>
						</view>
						<image src="../../static/images/img_me_right_jian_tou.png" class="rightIconClass">
						</image>
					</view>
					<view class="lineClass"></view>
					<view class="optionItemClass" @click="toHistoryScl">
						<view class="optionContentClass">
							<image :src="meItem.me_lishi" mode="" class="seeDoctorImgRecordClass"></image>
							<view class="seeDoctorRecordNameClass">历史测评结果</view>
						</view>
						<image src="../../static/images/img_me_right_jian_tou.png" mode="" class="rightIconClass">
						</image>
					</view>

					<view class="lineClass"></view>
					<view class="optionItemClass" @click="toMyBill">
						<view class="optionContentClass">
							<image :src="meItem.me_jiaoyi" mode="" class="seeDoctorImgRecordClass"></image>
							<view class="seeDoctorRecordNameClass">交易记录</view>
						</view>
						<image src="../../static/images/img_me_right_jian_tou.png" mode="" class="rightIconClass">
						</image>
					</view>
					<view class="lineClass"></view>
					<view class="optionItemClass" @click="toMyProduct">
						<view class="optionContentClass">
							<image :src="meItem.me_product" mode="" class="seeDoctorImgRecordClass"></image>
							<view class="seeDoctorRecordNameClass">我的商品</view>
						</view>
						<image src="../../static/images/img_me_right_jian_tou.png" mode="" class="rightIconClass">
						</image>
					</view>
				</view>
			</view>

		</view>

		<!-- 员工操作入口 - start -->
		<template>
			<button type="default" v-if="isStaff" class="mine-btn mine-btn-1" @click="toCaseList">
				<image src="../../static/images/mine/btn-icon-2.png" mode="aspectFit"></image>
				<text>我领取的客资</text>
			</button>

			<button class="staff-btn-2" v-if="isOperation" @click="toUserList()">
				电商用户（{{sysUserName}})
			</button>
		</template>
		<!-- 员工操作入口 - end -->


		<view class="sign-out-wrapper" @click="toLogout" v-if="isLogin">
			退出登录
		</view>

		<view class="img-entry-modal-flot" @click="toTaskCenter">
			<view class="img-entry-modal-flot-wrapper">
				<image :src="staticImgs.activityEntryBtn" mode=""></image>
				<view class="red-dot" v-if="showTaskEntryTipDot || isEconsultTaskRed"></view>
			</view>
		</view>

		<!-- 弹窗 -->
		<template>
			<contactOursPop ref="contactOursPop" />
			<DailyAffirmationModal @close="closeDailyCheckinModalHandle" ref="dailyModal" />

			<!-- 联系我们 - 绝对定位 -->
			<view class="service-icon-float" @click="contactOursClick()">
				<image :src="staticImgs.serviceImg" mode=""></image>
			</view>
		</template>
		<!-- 弹窗 -->

	</view>
</template>

<script>
	import {
		getUserInfoEquity
	} from '@/common/api/index_api.js'
	import {
		getPhoneNumberXingHao
	} from '@/common/utils/util.js'
	var app = getApp();
	import navigationBar from "@/components/navigationBar/navigationBar.vue";
	import contactOursPop from '../../components/contactOursPop/contactOursPop.vue'
	import DailyAffirmationModal from '@/components/DailyAffirmationModal.vue'
	import {
		getUserDiscountCount,
		logout
	} from '@/common/api/user_api.js'

	import {
		checkUserTodyIsCheckin
	} from '@/common/api/dailyCheckin.js'
	import dailyCheckinMixin from '@/mixins/dailyCheckinMixin.js'
	import {
		getTaskList
	} from '@/common/api/task'

	import {
		STORE_VAR
	} from '@/common/dict.js'
	import {
		mapGetters,
		mapState
	} from 'vuex'


	export default {
		mixins: [dailyCheckinMixin],
		components: {
			contactOursPop,
			navigationBar,
			DailyAffirmationModal,
		},
		data() {
			return {
				phoneNumber: '',
				nickName: '',
				headUrl: '',
				aa: {
					"bg_color": "#0A7F80",
					"color": "#FFFFFF",
					"flag": 2,
					"name": ''
				},
				titleHeight: null,
				userInfo: null,
				balance: 0, //可用余额
				couponNum: 0, //券数量
				extEquity: null, //是否有权限生成用户
				uniPlatform: uni.getSystemInfoSync().uniPlatform,
				me_top_img: this.imgBaseURL + '/me/me_top_img.png',
				meItem: {
					me_jiaoyi: this.imgBaseURL + '/me/my_purse.png',
					me_jiuzhen: this.imgBaseURL + '/me/me_jiuzhen.png',
					me_lianxi: this.imgBaseURL + '/me/me_lianxi.png',
					me_lishi: this.imgBaseURL + '/me/me_lishi.png',
					me_tiyan: this.imgBaseURL + '/me/me_tiyan.png',
					me_daily: this.imgBaseURL + '/me/me_daily.png',
					me_ai: this.imgBaseURL + '/me/me_ai.png',
					exchange_goods: this.imgBaseURL + '/me/exchange_goods.png',
					me_product: this.imgBaseURL + '/me/my_product.png'
				},
				staticImgs: {
					bg: this.imgBaseURL + '/scl/scl_main_bg.png',
					activityImg: this.imgBaseURL + '/scl/scl_activity_B.png',
					vip: this.imgBaseURL + '/scl/vip_icon.png',
					headImg: this.imgBaseURL + '/head.png',
					serviceImg: this.imgBaseURL + '/me_server_float_icon.png',
					activityEntryBtn: this.imgBaseURL + '/scl/scl-home-actity-modal-entry-v2.png',
				},
				couponVisible: false,
				couponCount: 0,
				dayCount: 0,
				showLogoutBtn: false,
				showTaskEntryTipDot: false,
			}
		},
		computed: {
			...mapGetters('user', [
				'isStaff',
				'isLogin',
				'isOperation',
				'sysUserName',
				'discountA',
				'discountB',
				'hasPhone',
				'hasShowTaskNotice'
			]),

			...mapState({
				currentGroup: state => state.user.currentGroup,
				isVip: state => state.user.isVip,
				activitySwitch: state => state.app.activitySwitch,
				isShowEconsultBlock: state => state.user.isShowEconsultBlock,
				isAuditMode: state => state.app.isAuditMode
			}),
			isEconsultTaskRed() {
				return this.hasShowTaskNotice && this.isShowEconsultBlock
			},
			isA() {
				return this.currentGroup == 'A'
			},
			currentBg() {
				return this.isA ? this.me_top_img : this.staticImgs.bg
			},
		},
		async mounted() {
			this.titleHeight = app.globalData.topHeight
			this.aa.name = '我的' //this.i18n.mePage.title;
			// this.$store.dispatch('user/checkUserIsLogin')
			this.$store.dispatch('user/getUserInfo')
			this.getTaskListInfo()
			this.checkUserTodyIsCheckin()


			this.userInfo = uni.getStorageSync('userInfoClientUser');
			console.log(this.userInfo, '----====this.userInfo')
			if (this.userInfo) {
				this.nickName = this.userInfo.nickName || '点击头像登录';
				this.headUrl = this.userInfo.avatar || this.staticImgs.headImg //'../../static/images/head.png';
				this.phoneNumber = getPhoneNumberXingHao(this.userInfo.phone);
			} else {
				this.nickName = '点击头像登录';
				this.headUrl = this.staticImgs.headImg //'../../static/images/head.png';
				this.phoneNumber = '';
			}

			await this.recordCouponCount()

			const tmpD = uni.getStorageSync(STORE_VAR.showDailyCheckinCouponPopup)
			console.log(tmpD, '--------------------tmpD--------------------')
			if (tmpD) {
				// this.showDailyCouponModal()
				uni.setStorageSync(STORE_VAR.showDailyCheckinCouponPopup, null)
			}

			this.getUserDiscountCount()
		},
		methods: {
			async getTaskListInfo() {
				const {
					data: dRes
				} = await getTaskList()
				if (dRes.success) {
					this.showTaskEntryTipDot = dRes.data.some(item => item.isSclDisCount == 'Y')
				}
			},
			toTaskCenter(type) {
				let tmp = type ? '?paramObj=' + JSON.stringify({
					from: 'invite'
				}) : ''
				uni.navigateTo({
					url: '/subcontractorC/pages/taskCenter/taskCenter' + tmp
				})
			},
			toExchangeGoods() {
				uni.navigateTo({
					url: '/subcontractorC/pages/exchangeGoods/exchangeGoods'
				})

				// uni.reLaunch({
				//   url: '/pages/index/index?userType=sclShare&adType=16&sclId=1742826100431507458'
				// })
			},
			showDailyCouponModal() {
				this.showCouponByDailyCheckin = true
			},
			toLogout() {
				uni.showLoading()
				logout().then(({
					data: res
				}) => {
					console.log(res, '============toLogout')
					if (res.success) {
						setTimeout(() => {
							this.$store.commit('user/setUserInfo', {})
							this.$store.commit('user/setIsShowEconsultBlock', false)

							this.$store.commit('user/setPurchaseAndUsageCount', 0)
							this.$store.commit('user/setUserInfo', {
								userId: '',
								openId: '',
								nickName: '',
								sex: '',
								avatar: '',
								phone: '',
								roles: [],
								username: '',
								clientUserUid: '',
							})

							this.$store.commit('user/setIsShowEconsultBlock', false)
							this.$store.commit('user/setIsShowEconsultModal', false)
							this.$store.commit('user/setRoles', [])
							this.$store.commit('user/setIsVip', false)


							uni.removeStorageSync('userInfoClientUser')
							uni.removeStorageSync('ttToken')
							this.nickName = '点击头像登录';
							this.headUrl = this.staticImgs.headImg
							this.phoneNumber = '';
							this.couponCount = 0
							this.$showToast('退出登录成功')
							uni.hideLoading()

							uni.reLaunch({
								url: '/pages/me/me'
							})

						}, 1000) //延迟一秒 让用户感知自己在退出
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			goToAiChat() {

				uni.navigateTo({
					url: '/subcontractorC/pages/AI/index'
				})
			},
			async checkUserTodyIsCheckin() {
				const {
					data: dRes
				} = await checkUserTodyIsCheckin()
				this.dayCount = dRes.data.visaAllToDay
				if (dRes.data?.visaUserToDay == 'N') {
					this.showDailyAffirmationModal()
				}

				console.log(dRes, '====dRes')
			},
			showDailyAffirmationModal() {
				if (this.isLogin) {
					this.$refs.dailyModal.show(this.dayCount)
				} else {
					this.$showToast('请点击登录');
				}
			},
			async getUserDiscountCount() {
				const {
					data: dRes
				} = await getUserDiscountCount()
				if (dRes.success) {
					this.couponCount = dRes.data
				}
			},
			toCollectPage() {

				if (!this.isLogin) {
					return this.$showToast('请点击登录');
				}


				uni.navigateTo({
					url: '/subcontractorC/pages/collect/collect'
				})
			},
			toOrderPage() {


				uni.reLaunch({
					url: '/pages/orderList/orderList'
				})
			},
			toEquityPage() {

				if (!this.isLogin) {
					return this.$showToast('请点击登录');
				}
				uni.navigateTo({
					url: '/pages/consultAccount/consultAccount'
				})
			},
			toCouponPage() {
				if (!this.isLogin) {
					return this.$showToast('请点击登录');
				}


				uni.navigateTo({
					url: '/subcontractorC/pages/coupon/coupon'
				})
			},

			toHistoryScl() {
				if (!this.isLogin) {
					return this.$showToast('请点击登录');
				}

				uni.navigateTo({
					url: '/subcontractorC/pages/sclHistory/sclHistory'
				})
			},
			toCaseList() {

				if (this.isLogin) {
					uni.navigateTo({
						url: '../../subcontractorA/case/caseList/caseList'
					})
				} else {
					this.$showToast('请点击登录');
				}
			},
			/**
			 * 确认关闭弹窗
			 */
			confirmFun() {
				this.$refs.popup.hide()
			},
			goDoctorRecordList() {
				return this.$showToast('暂未开放')
				if (this.isLogin) {
					uni.navigateTo({
						url: '/subcontractorA/allOrderList/allOrderList'
					})
				} else {
					this.$showToast('请点击登录');
				}
			},
			/**
			 * 跳转我的账单
			 */
			toMyBill() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/subcontractorC/pages/userBill/userBill'
					})
				} else {
					this.$showToast('请点击登录');
				}
			},
			contactOursClick() {
				this.$refs.contactOursPop.showPopup();
			},
			toLogin() {

				// if(this.hasPhone){
				uni.navigateTo({
					url: '/subcontractorA/authorization/authorization'
				})
				// }
				// uni.navigateTo({
				// 	url: '/subcontractorA/authorization/authorization'
				// })

				// uni.navigateTo({
				//   url:'/subcontractorA/wxLogin/wxLogin'
				// })

			},
			toUserList() {
				if (!this.isLogin) {
					return this.$showToast('请点击登录');
				}
				uni.navigateTo({
					url: '/subcontractorC/pages/staffPages/userList'
				})
			},
			toEditUserInfo() {
				if (!this.isLogin) {
					this.toLogin()
				} else {
					const paramObj = {
						userType: 'e-commerce'
					}
					uni.navigateTo({
						url: '/subcontractorA/updateUserInfo/updateUserInfo?paramObj=' + JSON.stringify(paramObj) +
							'&isBack=1'
					})
				}

			},
			toMyProduct() {
				uni.navigateTo({
					url: '/subcontractorMaiLun/pages/myRecord/myRecord'
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	@import url("./me.css");

	.activity-box {
		margin: auto;
		box-sizing: border-box;
		// padding-top: 22rpx;
		display: flex;
		justify-content: center;
		margin-top: 28rpx;
		margin-bottom: 28rpx;

		image {
			width: 686rpx;
			height: 256rpx;
			margin: auto;
			background: #D8D8D8;
			border-radius: 26rpx;
		}
	}

	.head-wrapper {
		position: relative;

		.vip-icon {
			position: absolute;
			right: -52rpx;
			bottom: 0;
			width: 128rpx;
			height: 60rpx;
		}
	}

	.img-entry-modal-flot {
		position: fixed;
		right: 0;
		z-index: 6;
		bottom: 262rpx;

		.img-entry-modal-flot-wrapper {
			position: relative;

			image {
				// width: 160rpx;
				// height: 160rpx;
				width: 166rpx;
				height: 152rpx;
			}

			.red-dot {
				position: absolute;
				right: 19rpx;
				top: 79rpx;

				width: 26rpx;
				height: 26rpx;

				background: linear-gradient(180deg, #FFD9D9 0%, #FF1466 100%);
				box-shadow: 0rpx 2rpx 4rpx 0rpx #F8A38D;
				border: 2rpx solid #FFFFFF;

				border-radius: 50%;
			}
		}


	}


	.login-btn {
		box-sizing: border-box;
		width: 300rpx;
		height: 80rpx;
		background-color: #58B938;
		border-radius: 40rpx;
		margin-top: 36rpx;

		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.bind-phone-btn {
		width: 200rpx;
		height: 49rpx;
		background: #58B938;
		border-radius: 25rpx;
		line-height: 49rpx;

		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;

		text-align: center;
		font-style: normal;
	}

	.staff-btn-2 {
		height: 102rpx;
		width: 640rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #488CFD 0%, #46C0FF 100%);

		line-height: 102rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;

		margin-bottom: 30rpx;
	}

	.item-right-wrapper {
		display: flex;
		align-items: center;

		.extra-info {
			margin-right: 20rpx;

			width: 84rpx;
			height: 33rpx;
			background: #FF5FA7;
			border-radius: 17rpx;

			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 33rpx;
		}
	}

	.service-icon-float {
		position: fixed;
		right: 0;
		top: 262rpx;

		&,
		image {
			height: 120rpx;
			width: 112rpx;
		}
	}

	.sign-out-wrapper {
		width: 360rpx;
		height: 80rpx;
		border-radius: 46rpx;
		border: 2rpx solid #58B938;
		line-height: 80rpx;

		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #58B938;
		// line-height: 42rpx;
		margin: auto;
		margin-bottom: 50rpx;
		text-align: center;
		font-style: normal;
	}
</style>